.toggle-check-input {
  width: 1px;
  height: 1px;
  position: absolute;
  display: none;
}

.toggle-check-text {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  background: #ccc;
  padding: 0.25em 0.5em 0.25em 1.75em;
  border-radius: 1em;
  width: 50px;
  height: 21px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s;
  line-height: initial;
}
.toggle-check-text:after {
  content: ' ';
  display: block;
  background: #fff;
  width: 1.1em;
  height: 1.1em;
  border-radius: 1em;
  position: absolute;
  left: 0.3em;
  top: 0.25em;
  transition: left 0.15s, margin-left 0.15s;
}
.toggle-check-text:before {
  font-size: 90%;
  content: 'OFF';
}
.toggle-check-input:checked ~ .toggle-check-text {
  color: #319113;
  padding-left: 0.5em;
  padding-right: 2em;
}
.toggle-check-input:checked ~ .toggle-check-text:before {
  font-size: 90%;
  content: 'ON';
}

.toggle-check-input:checked ~ .toggle-check-text:after {
  left: 100%;
  margin-left: -1.4em;
}
